<template>

	<view class="search-container">

		<view class="FourTopicbackground">
			<view v-for="item in FourTopicContext" class="FourTopic">
				<image :src="item.image" class="FourTopicImg"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<view class="SecondaryColumnsBackground">
			<u-scroll-list style="margin-left: 10rpx; padding-top: 40rpx;" :indicator="indicator"
				indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
				<view v-for="(item, index) in list" :key="index">
					<view class="SecondaryColumnsImg1 SecondaryColumnsImg">
						<image :src="item.thumb" class="SecondaryColumns"></image>
						<text>{{item.text}}</text>
					</view>
					<view class="SecondaryColumnsImg">
						<image :src="item.thumb1" class="SecondaryColumns"></image>
						<text>{{item.text1}}</text>
					</view>

				</view>

			</u-scroll-list>
		</view>
		<view class="ImportantNotice">
			<image src="../../../static/img/1f85cfa7336261815b709f21f6a1ec7.png" mode="" class="ImportantNoticeImage">
			</image>
			<view class="DiseaseZone" style="background-color: #aaffff;width: 96%; height: 100%;">
				<view class="DiseaseZoneText" style="margin: 20rpx 0 20rpx 0;">
					<text style="font-size: 30rpx; margin-left: 20rpx; font-weight: bold; ">疾病专区</text>
					<text style="margin-right: 100rpx; margin-left: 20rpx;"><text
							style="font-size: 25rpx;color: #919191;">已服务</text>
						<text style="font-size: 25rpx;color: #cfc122;">2379845644</text>
						<text style="font-size: 25rpx;color: #919191;">人</text>
						<text style="font-size: 25rpx;color: #cfc122;">98.8%</text>
						<text style="font-size: 25rpx;color: #919191;">满意</text></text>
					<text style="margin-right: 40rpx;font-size: 27rpx;color: #919191;">更多</text>
				</view>
				

				<view v-for="(item,index) in DiseaseZoneDat" class="DiseaseZoneBox" >
					<view v-for="(items,index) in item.data" class="DiseaseZoneSiomBox">
						<view class="imgbackground" style="background-color: #f7f7f9;">
							<image style="width: 60rpx; height: 60rpx;" :src="items.imgs" mode=""></image>
						</view>
						<text>{{items.text}}</text>
					</view>
				</view>
				<view class="gengduo" @click="shrink">
					<text style=" font-size: 24rpx; color: #0000ff;">{{shrinkText}}</text>
					<text class="iconfont">{{shrinkIco}}</text>
				</view>
			</view>
		</view>
		<view class="GoShanxi" style="">
			
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				indicator: true,
				shrinkText: "展开更多专科",
				shrinkIco: "\ue61f",
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text: "习俗挂号",
					thumb1: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text1: "习俗挂号"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text: "习俗挂号",
					thumb1: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text1: "习俗挂号"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text: "习俗挂号",
					thumb1: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text1: "习俗挂号"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text: "习俗挂号",
					thumb1: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text1: "习俗挂号"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text: "习俗挂号",
					thumb1: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text1: "习俗挂号"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text: "习俗挂号",
					thumb1: "https://cdn.uviewui.com/uview/goods/1.jpg",
					text1: "习俗挂号"
				}],

				FourTopicContext: [{
						image: "/static/img/kuaisuwenyisheng.png",
						text: "问医生"
					}, {
						image: "/static/img/guahao.png",
						text: "去挂号"
					}, {
						image: "/static/img/yuyuetijian.png",
						text: "约体检"
					},
					{
						image: "/static/img/chabaogao.png",
						text: "查报告"
					},
				],
				DiseaseZoneDat: [{
					data: [{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					}]
				}, {
					data: [{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					}]
				}, {
					data: [{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					},{
						imgs: "/static/DiseaseZone/fuke.png",
						text: "妇科",
					}]
				}]
			};
		},

		methods: {
			shrink() {
				if(this.shrinkText == "收起") {
					this.shrinkText = "展开更多专科"
					this.shrinkIco = "\ue61f"
					this.DiseaseZoneDat=[{
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}, {
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}, {
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}]
				} else {
					this.shrinkText = "收起"
					this.shrinkIco = "\ue713"
					this.DiseaseZoneDat=[{
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}, {
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}, {
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}, {
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}, {
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						},{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}, {
						data: [{
							imgs: "/static/DiseaseZone/fuke.png",
							text: "妇科",
						}]
					}]
					
				}

			},

		}
	};
</script>

<style scoped lang="scss">
	.FourTopicImg {

		width: 120rpx;
		height: 120rpx;
		border-radius: 30rpx;
		margin-bottom: 10rpx;
	}

	.FourTopic {
		width: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.FourTopicbackground {
		margin-top: 80rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;
	}


	.SecondaryColumns {
		width: 100rpx;
		height: 100rpx;
		margin: 10rpx 25rpx 10rpx 25rpx;

	}

	.SecondaryColumnsBackground {
		margin-top: 30rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.SecondaryColumnsImg {

		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.SecondaryColumnsImg1 {
		margin-bottom: 40rpx;

	}

	.ImportantNotice {
		background-color: #f4f4f2;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

	}

	.ImportantNoticeImage {
		border-radius: 20rpx;
		height: 200rpx;
		width: 96%;
		margin: 20rpx 0 20rpx 0;

	}

	.DiseaseZoneText {
		display: flex;

	}

	.DiseaseZone {
		height: 670rpx;
		border-radius: 20rpx;
	}

	.imgbackground {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.DiseaseZoneSiomBox {
		display: flex;
		flex-direction: column;
		align-items: center;

		margin: 0 23rpx 30rpx 23rpx;
	}

	.DiseaseZoneBox {
		width: 100%;
		display: flex;
	}

	.gengduo {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>